草庐IT

CSS 创建

全部标签

javascript - 在 CSS 中保持纵横比的同时将图像调整到容器大小?

我有一堆不同(未知)尺寸的图像。我想将这些图像放到一个div中,并让它们自动符合div的尺寸,同时保持它们的纵横比。换句话说,如果图像宽度大于高度,则宽度将为100%,高度将相应缩放。如果图像高于宽度,高度将为100%,宽度将相应缩放。有没有办法在纯css中做到这一点?谢谢 最佳答案 使用css属性max-width和max-height图片上的图标将带您到达您需要去的地方。fiddlehttp://fiddle.jshell.net/sHAQ9/HTMLCSSdiv{width:150px;height:150px;overflo

javascript - 如何在使用插件 sdk 创建的插件中使用 Canvas drawWindow 函数?

我使用addonsdk创建了一个Firefox插件.我正在尝试使用canvasdrawWindow功能。我有以下代码来使用该函数,其中ctx指的是我通过canvas.getContext("2d")获得的Canvas上下文。ctx.drawWindow(window,0,0,100,200,"rgb(255,255,255)");当我运行此代码时,在使用附加的脚本中tabs.activeTab.attach({contentScriptFile:data.url("app.js")//app.jscontainstheabovelineofcode});我收到以下错误:TypeErro

javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

我假设使用HTML5中的所有这些硬件加速动画,实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素,但是如果我将动画移出视线则没有区别。有任何想法吗? 最佳答案 您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西,但可以为您提供强大的indisium)。但是,了解Canvas的工作原理也可以为您提供坚实的指导。例如,Canvas是一个简单的

javascript - jQuery/CSS 动画 div 从左到右的宽度

我正在尝试使用jQuery为div设置动画,背景图片的宽度从左到右逐渐减小,同时绝对定位。我需要使其与IE8兼容,因此使用jQuery。这是一个基本的JSFiddle演示链接,包含我目前所拥有的内容,但它是从右到左动画的:JSFiddlelinkjQuery(document).ready(function($){$(document).on('click','.splat',function(e){$(this).animate({width:"0px"},800);});});.splat{width:400px;height:400px;background:blue;posit

javascript - 为什么在进行 Javascript 继承时要创建一个临时构造函数?

为什么goog.inherits来自GoogleClosureLibrary看起来像这样:goog.inherits=function(childCtor,parentCtor){functiontempCtor(){};tempCtor.prototype=parentCtor.prototype;childCtor.superClass_=parentCtor.prototype;childCtor.prototype=newtempCtor();childCtor.prototype.constructor=childCtor;};而不是goog.inherits=functio

javascript - css动画后点击事件丢失

为了开玩笑,我在我的一个网站上放了一个Google-eskbarrelroll。第一次单击所选元素时一切正常,但之后不会再次触发。我试过.click、.on('click',function(){})都没有用。关于如何解决以及为什么会发生这种情况的任何想法?BasicjsFiddlehere源代码示例;RollMe$(function(){$('#roll').on('click',function(){$('body').css({"-moz-animation-name":"roll","-moz-animation-duration":"4s","-moz-animation-i

javascript - 如何创建一个 memoize 函数

我被这个memoize问题难住了。我需要创建一个函数来检查是否已经为给定参数计算了一个值,返回先前的结果,或者运行计算并返回该值。虽然我是JS的新手,但我已经花了几个小时在这上面。我无法理解如何做到这一点。我不能使用任何内置函数,并且真的很想了解我需要做什么。这是我目前所知道的,这是错误的,在这一点上感觉像是伪代码。我已经在这里搜索了现有的memoize问题,但我似乎还无法找到任何解决方案。非常感谢任何帮助。myMemoizeFunc=function(passedFunc){varfirstRun=passedFunc;functioncheck(passedFunc){if(fir

【clusterProfiler包】创建KEGG.db过程中的报错及解决办法

在使用clusterProfiler包进行enrichKEGG()分析时,默认使用KEGG在线最新数据进行分析(use_internal_data=FALSE)。但由于网络因素影响,常常会出现以下情况:如果出现这种情况,建议等网络环境比较宽松时再次运行!(晚11点之后,成功的概率比较大) 然而即使这样,也可能出现如下报错:这种情况是由于KEGG链接原因导致的,具体解决办法建议参考生信~鱼同学的文章!(链接:http://t.csdn.cn/Y0Fg0)在解决上面两个常见报错之后,已经可以使用clusterProfiler包和KEGG在线数据进行enrichKEGG分析了。但是笔者还是推荐使用本

javascript - 如何让导入的 css 字体/图标对 shadow dom 中的元素产生影响?

假设我想使用shadowdom创建一个自定义元素。模板中的某些元素具有在链接的css文件中指定的类名。现在我想让css规则对元素产生影响。但由于shadowdom样式边界,我无法实现。DreamLineTourBlogContactErrorSearchvarimportDoc=document.currentScript.ownerDocument;varproto=Object.create(HTMLElement.prototype,{createdCallback:{value:function(){vart=importDoc.querySelector("#blog-hea

javascript - webpack css loader 不工作 : no output css file

我正在从事开源元素,现在我需要为前端设置webpack。我在下面尝试了webpack配置,JS工作正常,但css不行,没有css输出文件。我不知道为什么会这样,请帮助我。下面是我的webpack配置js文件:constpath=require("path");constwebpack=require('webpack');constExtractTextPlugin=require("extract-text-webpack-plugin");constnode_dir=__dirname+'/node_modules';constsassLoaders=['css-loader','